<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a href="javascript:;"></a>
        <a
          href="javascript:;"
          @click="changeBrand(i)"
          v-for="i in CategoryFilterObj.brands"
          :key="i"
          >{{ i.name }}</a
        >
      </div>
    </div>
    <!-- 规格 -->
    <div class="item" v-for="i in CategoryFilterObj.saleProperties" :key="i">
      <div class="head">{{ i.name }}</div>
      <div class="body">
        <a href="javascript:;"></a>
        <a
          :class="{ active: item.salected }"
          href="javascript:;"
          @click="toggleSelect(item, i)"
          v-for="item in i.properties"
          :key="item"
          >{{ item.name }}</a
        >
      </div>
    </div>
  </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const route = useRoute()
    const CategoryFilterObj = ref({})
    async function getCategoryFilter () {
      const { result } = await findSubCategoryFilter(route.params.id)
      // console.log('er', result)
      // 数组顶部新增一项 保持数据解构字段一致
      result.brands.unshift({ id: null, name: '全部' })
      result.saleProperties.forEach(item => {
        item.properties.unshift({ id: null, name: '全部' })
      })
      CategoryFilterObj.value = result
    }
    // 改变筛选区 品牌 的值
    function changeBrand (i) {
      // 改变筛选区 品牌 的值
      console.log(i)
    }
    // 改变筛选区  的值
    function toggleSelect (item, i) {
      console.log(item, i)
      // 排他实现 类的添加样式的添加
      i.properties.forEach(item => {
        item.salected = false
      })
      // 为自己设为true
      item.salected = true
      // 去重 判断有没有同类型的 有就删除然后再添加
      // 如果点击·的是全部 那么就删除该项
      // 改变list中attrs的值push添加
    }
    onMounted(() => {
      // console.log(route.params)
      getCategoryFilter()
    })
    return { CategoryFilterObj, changeBrand, toggleSelect }
  }
}
</script>
<style scoped lang='less'>
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    padding: 10px 0;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all 0.3s;

        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
